<template>
  <div class="popBox" v-if="visible">
    <div class="close-header">
      <a-button
        type="text"
        size="small"
        @click="handleCancel"
        class="close-btn"
      >
        ×
      </a-button>
    </div>
    <h6 class="mb-3">{{ historyPopupData.title }}</h6>

    <ScrollBar>
      <div class="popBox__subtitle tx-body-small" v-html="historyPopupData.subtitle"></div>
    </ScrollBar>
    <div class="mt-5">
      <div class="circle-link">
        <a
          :href="historyPopupData.linkUrl"
          :target="historyPopupData.isExternal ? '_blank' : '_self'"
          class="nuxt-link-active"
        >
          <div>了解更多</div>
          <span class="circle-link__icon"></span>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import ScrollBar from '@/common/ScrollBar/index.vue'

// 定义组件名称
defineOptions({
  name: 'LightHistoryPopup'
})

// 定义 props
interface HistoryPopupData {
  title: string
  subtitle: string
  linkUrl: string
  isExternal: boolean
}

const props = defineProps<{
  historyPopupData: HistoryPopupData,
  show: boolean
}>()

const visible = computed(() => props.show)

const emit = defineEmits(['update:show'])
const handleCancel = () => {
  emit('update:show', false)
}

</script>
<style lang="scss" scoped>
.close-header {
  height: 16px;
  display: flex;
  justify-content: flex-end;

  .close-btn {
    padding: 0;
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: #666;
    cursor: pointer;

    &:hover {
      color: #333;
    }
  }
}

.popBox {
  // position: absolute;
  width: 100%;
  max-width: 300px;
  // top: 50%;
  // left: 50%;
  color: #000;
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 8px 32px rgba(130, 130, 140, 0.24);
  z-index: 500;
  // transform: translate(-50%, -50%);

  &__subtitle {
    padding-right: 8px;
  }
}

:deep(.simple-bar) {
  max-height: 200px;
}

// Circle Link 样式
.circle-link {
  display: flex;
  --link-color: #0032a0;

  a {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.285;
    letter-spacing: 0.04em;
    border: none;
    background: none;
    color: var(--link-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0;

    &:hover {
      .circle-link__icon {
        &:before {
          transform: translate(-50%, -50%);
        }

        &:after {
          transform: translate(150%, -50%);
        }
      }
    }

    &:active {
      .circle-link__icon {
        &:before {
          transform: translate(-260%, -50%);
        }

        &:after {
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}

.circle-link__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--link-color);
  position: relative;
  margin-left: 7px;
  flex-shrink: 0;

  &:after,
  &:before {
    content: "";
    width: 6px;
    height: 9px;
    position: absolute;
    top: 50%;
    left: 55%;
    background-image: url();
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: hsla(0, 0%, 100%, 0);
    transition: transform 0.3s ease-in-out;
    transform: translate(-150%, -50%);
  }
}

// 响应式设计
@media (max-width: 767.98px) {
  .circle-link__icon {
    width: 12px;
    height: 12px;
    margin-left: 4px;

    &:after,
    &:before {
      width: 4.7px;
      height: 6px;
      background-image: url();
      background-position: 50%;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: hsla(0, 0%, 100%, 0);
    }
  }
}

// 工具类
.mb-3 {
  margin-bottom: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.arco-modal {
  width: fit-content;
}

.arco-modal-body {
  padding: 0;
}
</style>
